<template>
  <div class="player-list-hot">
    <div class="title border-b-1 pt-4 pb-2 mb-4 yu-color-text">
      {{ store.currentInfo.centerTile }}
    </div>
    <ul>
      <li
          v-for="playlist in hot"
          :key="playlist.id"
          class="flex items-center mt-2 mb-2 yu-one-hover-bgColor cursor-pointer"
          @click="jumpPlaylist(playlist.id)"
      >
        <div class="w-15 h-15 mr-2">
          <img v-if="playlist.picUrl" class="w-full h-full" :src="playlist.picUrl" alt="">
          <img v-else class="w-full h-full" :src="playlist?.coverImgUrl" alt="">
        </div>
        <div class="text-sm flex flex-col w-9/11">
          <span class="w-10/12 truncate yu-textColor-hover mb-2">{{ playlist.name }}</span>
          <span class="w-10/12 truncate yu-textColor-hover" v-if="playlist.creator" @click.stop="jumpHomePage(playlist.creator.userId)">{{ playlist.creator.nickname }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import {onMounted, reactive, toRefs} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()
const data = reactive({
  hot: []
})
const {hot} = toRefs(data)
const store = useStore()

onMounted(() => {
  // // 获取跟这歌单/歌曲/专辑相关的数据
  requestHot()
})

// 获取跟这歌单/歌曲/专辑相关的数据
const requestHot = () => {
  const {type, studioId} = store.currentInfo
  // 判断属于哪个数据歌单还是歌曲还是专辑
  const currentType = {
    // 歌曲
    0: () => {
      store.geSimiPlaylist().then(playlists => {
        data.hot = playlists
      })
    },
    1: () => {
      // 热门推荐数据
      store.getSongList().then(result => {
        data.hot = result  // 这里报警告的原因是没考虑接口报错所以类型不匹配
      })
    },
    2: () => {
      // 获取相关专辑专辑
      store.getArtistAlbum({id: studioId}).then(res => {
        data.hot = res.hotAlbums
      })
    },
  }
  currentType && currentType[type] && currentType[type]()
}


const jumpPlaylist = (id) => {
  // 获取类型
  const {type} = store.currentInfo
  // 判断属于哪个数据歌单还是歌曲还是专辑
  const currentType = {
    // 歌曲
    0: () => {
      // 跳转歌单数据详情
      router.push({
        path: '/play-list-detail',
        query: {
          id
        }
      })
    },
    1: () => {
      // 跳转歌单数据详情
      router.push({
        path: '/play-list-detail',
        query: {
          id
        }
      })
    },
    2: () => {
      // 跳转专辑数据详情
      router.push({
        path: '/collection-detail',
        query: {
          id
        }
      })
    },
  }
  currentType && currentType[type] && currentType[type]()
}

// 跳转到用户主页
const jumpHomePage = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}
</script>

<style lang="scss" scoped>

</style>
